<script type="text/javascript">
    var chart;
    $(document).ready(function() {

        $('#startPicker').datepick({ dateFormat: 'yyyy-mm-dd'});

        chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'column_basic',
                        defaultSeriesType: 'column'
                    },
                    title: {
                        text: '{{ startDate }} - {{ endDate }}'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories: [{% autoescape off %}{% for items in dname_list %}{% if not forloop.last %}'{{ items }}',{% else %}'{{ items }}'{% endif %}{% endfor %}{% endautoescape %}]
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: ''
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        backgroundColor: '#FFFFFF',
                        align: 'left',
                        verticalAlign: 'top',
                        x: 100,
                        y: 70,
                        floating: true,
                        shadow: true
                    },
                    tooltip: {
                        formatter: function() {
                            return '' +
                                    this.x + ': ' + this.y;
                        }
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [
                        {
                            name: 'PV',
                            data: {{ pv_list }}

                        },
                        {
                            name: 'UV',
                            data: {{ uv_list }}

                        },
                        {
                            name: 'IP',
                            data: {{ ip_list }}

                        }
                    ]
                });


    });

</script>
<article class="module width_full">
    <div class="module_content">
        <article class="stats_graph">
            <div id="column_basic" style="width: 100%; height: 220px; margin: 0 auto"></div>
        </article>
        <div class="clearfix"></div>
    </div>
</article>